<!doctype html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer"/>
    <title>[[${userInfo.name}]]-iStudy</title>

    <!-- Main Font -->
    <script src="front/js/libs/webfontloader.min.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap-reboot.css">
    <link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap-grid.css">

    <style>
        body {
            background-color: rgb(238, 238, 238);
        }
        .navbar{
            margin-bottom: 0px;
            background-color: #FFFFFF;
            box-shadow: 0 0 1em #eee;
            height:55px;
            line-height: 55px;
        }
        .banner{
            background-image: url('../iStudy/images/banner2.jpg');
            color:white;
            height:247px;
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .clear-padding{
            padding-left: 0px;
            padding-right: 0px;
            background-color: #fff;
        }
        .table-top-box{
            border-radius: 5px;
            padding:40px 45px;
            background-color:white;
            height:500px;
        }
        .margin-top-row{
            margin-top: 10px;
        }

        .tab-content{
            margin-top:10px;
            padding: 10px;
            height: 700px;
        }
        /*一下设置课程容器样式*/
        .ui-block{
            padding:10px;
            background-color: #fff;
            border-radius: 5px;
            border: 1px solid #e6ecf5;
            margin-bottom: 15px;
        }
        .post-thumb{
            margin-bottom:15px;
        }
        .post-content h4{
            font-weight: 600;
        }
        .post-thumb img:hover{
            transform: scale(1.1);
        }
        .new-post-additional-info{
            padding-top:10px;
            padding-bottom: 10px;
            text-align:right;
        }

        ul.comment-ul{
            list-style-type:circle;
        }
        .panel-info{
            border-color:#fff;
        }
        li.comment-li{
            border-bottom: 1px solid #e6ecf5;
            margin-bottom: 5px;
        }
        comment-div-wrap{
            padding:5px;
        }
        a.comment-name{
            font-weight: 600;
        }
        time.comment-time{
            float:right;
        }
        p.comment-content{
            padding:5px
        }
        .comment-row{
            border-bottom: 1px solid rgb(238,238,238);
            margin-bottom: 10px;
        }
        .card-body{
            flex: 1 1 auto;
            padding: 1.25rem;
        }
        .col-form-label{
            padding-top: calc(0.375rem + 1px);
            padding-bottom: calc(0.375rem + 1px);
            margin-bottom: 0;
            font-size: inherit;
            line-height: 1.5
        }
        .form-check-inline .form-check-input{
            position: static;
            margin-top: 0;
            margin-right: 0.3125rem;
            margin-left: 0;
        }
        .form-check-inline{
            display: inline-flex;
            align-items: center;
            padding-left: 0;
            margin-right: 0.75rem;
        }
        /*设置tab页签标题样式*/
        .nav-tabs > li > a{
            font-weight: 600;
        }
    </style>

    <script src="background/js/modernizr.min.js"></script>
    <script src="background/js/jquery.min.js"></script>
    <script src="background/js/moment.min.js"></script>
</head>
<body>
<div th:replace="common/bar::#header"></div>
<div class="container"  style="margin-top: 55px">
    <div class="row banner margin-top-row">
    </div>
    <div class="row margin-top-row">
        <div class="col-sm-12 clear-padding">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active" style="cursor: pointer">
                    <a href="#collection" data-toggle="tab">
                        我的课程收藏
                    </a>
                </li>
                <li>
                    <a href="#comment" data-toggle="tab">
                        我的评论
                    </a>
                </li>
                <li>
                    <a href="#notes" data-toggle="tab">
                        我的笔记
                    </a>
                </li>
                <li>
                    <a href="#config" data-toggle="tab">
                        个人信息设置
                    </a>
                </li>
            </ul>

            <div id="myTabContent" class="tab-content" style="overflow: scroll">
                <div class="tab-pane fade in active"  id="collection">
                    <div class="row">
                        <div th:if="${collection!=null}" class="col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12" th:each="collection:${collections}">
                            <!--课程列表 从这里设置移入可以点击-->
                            <div class="ui-block">
                                <!-- Post -->
                                <article>
                                    <div class="post-thumb">
                                        <a th:href="@{courseDetail(id=${collection.courseId})}"  >
                                            <img th:if="${collection.course.imgUrl!=null} " style="width: 100%;height: 144px" th:src="${collection.course.imgUrl}" alt="photo">
                                        </a>
                                    </div>
                                    <div class="post-content">
                                        <h4>
                                            <a th:href="@{courseDetail(id=${collection.courseId})}"  >
                                                [(${collection.course.title})]
                                            </a>
                                        </h4>

                                        <p style="color:#999999" th:if="${collection.course.introduce!=null}">
                                        <div th:if="${#strings.length(collection.course.introduce) gt 10}">
                                            <a th:href="@{courseDetail(id=${collection.courseId})}"  >
                                                摘要：[(${collection.course.title})]...»
                                            </a>

                                        </div>
                                        <div th:if="${#strings.length(collection.course.introduce) le 10}">
                                            <a th:href="@{courseDetail(id=${collection.courseId})}"  >
                                                摘要：[(${collection.course.introduce})]
                                            </a>
                                        </div>
                                        </p>
                                        <div class="new-post-additional-info">
                                            <button type="button" class="btn btn-primary">
                                            <span class="glyphicon glyphicon-user">
                                                <a th:href="@{courseDetail(id=${collection.course.id})}" style="color:#fff"  >
                                                [[${collection.course.readCount}]]人学习过
                                                </a>
                                            </span>
                                            </button>
                                        </div>
                                    </div>
                                </article>
                                <!-- ... end Post -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade"  id="comment">
                    <div class="row comment-row" th:each="course:${courseList}">
                        <div th:if="${course!=null}" class="col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12" >
                            <!--课程列表 从这里设置移入可以点击-->
                            <div class="ui-block">
                                <!-- Post -->
                                <article>
                                    <div class="post-thumb">
                                        <a th:href="@{courseDetail(id=${course.id})}">
                                            <img th:if="${course.imgUrl!=null} " style="width: 100%;height: 144px" th:src="${course.imgUrl}" alt="photo">
                                        </a>
                                    </div>
                                    <div class="post-content">
                                        <h4>
                                            <a th:href="@{courseDetail(id=${course.id})}">
                                                [(${course.title})]
                                            </a>
                                        </h4>

                                        <p style="color:#999999" th:if="${course.introduce!=null}">
                                        <div th:if="${#strings.length(course.introduce) gt 10}">
                                            <a th:href="@{courseDetail(id=${course.id})}"  >
                                                摘要：[(${course.title})]...»
                                            </a>

                                        </div>
                                        <div th:if="${#strings.length(course.introduce) le 10}">
                                            <a th:href="@{courseDetail(id=${course.id})}"  >
                                                摘要：[(${course.introduce})]
                                            </a>
                                        </div>
                                        </p>
                                        <div class="new-post-additional-info">
                                            <button type="button" class="btn btn-primary">
                                            <span class="glyphicon glyphicon-user">
                                                <a th:href="@{courseDetail(id=${course.id})}" style="color:#fff"  >
                                                [[${course.readCount}]]人学习过
                                                </a>
                                            </span>
                                            </button>
                                        </div>
                                    </div>
                                </article>
                                <!-- ... end Post -->
                            </div>
                        </div>
                        <div class="col col-xl-9 col-lg-6 col-md-6 col-sm-12 col-12" >
                                <!--课程留言 从这里设置移入可以点击-->
                                <div class="col-sm-12" style="height: 300px;overflow: auto">
                                    <div class="card-body">
                                        <ul class="comment-ul"  th:each="comment:${commentList}" th:if="${comment.courseId == course.id}">
                                            <li class="comment-li">
                                                <div class="comment-div-wrap">
                                                    <a class="comment-name" th:text="${comment.username}"></a>
                                                    <time class="comment-time" th:text="${#dates.format(comment.time,'yyyy年MM月dd日 HH:mm:ss')}"></time>
                                                </div>
                                                <p class="comment-content" th:text="${comment.content}"></p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="tab-pane fade"  id="notes">
                    <div class="row" style="padding-bottom:10px">
                        <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                            <a href="notes" style="color:#fff" target="_blank">
                                <button type="button" class="btn btn-primary">
                                    写笔记
                                </button>
                            </a>
                        </div>
                    </div>
                    <div class="row" th:each="note:${userNotes}">
                        <div th:if="${note!=null}" class="col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12" >
                            <!--笔记列表-->
                            <div class="ui-block">
                                <!-- Post -->
                                <article>
                                    <div class="post-thumb">
                                        <a target="_blank" th:href="@{notes(id=${note.id})}">
                                            <img th:if="${note.imgUrl!=null} " style="width: 100%;height: 144px" th:src="${note.imgUrl}" alt="photo">
                                        </a>
                                    </div>
                                </article>
                                <!-- ... end Post -->
                            </div>
                        </div>
                        <div class="col col-xl-9 col-lg-6 col-md-6 col-sm-12 col-12" >
                            <!--笔记-->
                            <div class="col-sm-12" style="overflow: auto">
                                <div class="card-body">
                                    <ul class="comment-ul">
                                        <li class="comment-li" style="font-size: 18px">
                                            <div class="comment-div-wrap">
                                                <a class="comment-name" th:href="@{notes(id=${note.id})}" target="_blank" th:text="${note.username}"></a>
                                                <time class="comment-time" th:text="${#dates.format(note.time,'yyyy年MM月dd日 HH:mm:ss')}"></time>
                                            </div>
                                            <p style="padding-top: 90px" th:text="${note.title}"></p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="config">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label">头像</label>
                                        <div class="col-sm-4">
                                            <img th:src="${userInfo.img}" class="img-thumbnail" id="img_head" style="width: 150px;height:150px " alt="">
                                        </div>
                                        <input type="file" name="image" onchange="uploadImg()" id="img" accept="image/jpeg,image/jpg,image/png">
                                    </div>
                                    <hr>
                                    <div class="form-group row">
                                        <label for="name" class="col-sm-2 col-form-label">用户昵称 <small class="form-text text-muted text-danger">必填项</small></label>
                                        <input th:value="${userInfo.name}" type="text" class="form-control col-sm-6" id="name" autocomplete="off">
                                    </div>

                                    <div class="form-group row">
                                        <label for="address" class="col-sm-2 col-form-label">所在地区 <small class="form-text text-muted">可选项</small></label>
                                        <input th:value="${userInfo.address}" type="text" class="form-control col-sm-6" id="address" autocomplete="off">
                                    </div>
                                    <div class="form-group row">
                                        <label for="career" class="col-sm-2 col-form-label">职业 <small class="form-text text-muted">可选项</small></label>
                                        <input th:value="${userInfo.career}" type="text" class="form-control col-sm-6" id="career" autocomplete="off">
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label">性别 <small class="form-text text-muted text-danger">必填项</small></label>
                                        <div class="form-check form-check-inline">
                                            <input th:checked="${userInfo.sex == '男'}" class="form-check-input" type="radio" name="sex" id="man" value="男">
                                            <label class="form-check-label" for="man" > 男</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input th:checked="${userInfo.sex == '女'}" class="form-check-input" type="radio" name="sex" id="woman" value="女">
                                            <label class="form-check-label" for="woman"> 女</label>

                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input th:checked="${userInfo.sex == '保密'}" class="form-check-input" type="radio" name="sex" id="secret" value="保密">
                                            <label class="form-check-label" for="secret"> 保密</label>
                                        </div>
                                    </div>
                                    <button onclick="updateUser()" class="btn btn-primary">修改基本信息</button>
                                </div>
                                <!-- end card-body -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="visibility: hidden">换行</div>
<div class="jumbotron text-center" id="footer" style="margin-bottom:0;background-color:rgb(245,246,247);">
    <span class="span" style="color:#000;">Copyright &copy wuzhiming</span>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="common/js/sweetalert.min.js"></script>
<script src="background/plugins/datetimepicker/js/daterangepicker.js"></script>
<script src="common/js/login.js"></script>
<script src="background/js/jquery.min.js"></script>
<script>
    /**
     * 上传头像
     */
    function uploadImg() {
        var formdata=new FormData();
        formdata.append("image",$("#img").get(0).files[0]);
        formdata.append("flag",4);
        $.ajax({
            async: false,
            type: "POST",
            url: "image/upload",
            dataType: "json",
            data: formdata,
            contentType:false,//ajax上传图片需要添加
            processData:false,//ajax上传图片需要添加
            success: function (data) {
                if (data['code']== 200){
                    $('#img_head').attr("src",data['data']);
                    $('#img_head1').attr("src",data['data']);
                    swal("成功", "上传成功", "success");
                }else {
                    swal("错误", "文件过大，请上传小于1M的图片", "error");
                }
            },
            error: function (e) {
            }
        });
    }

    /**
     * 更新基本信息
     */
    function updateUser() {
        let name = $('#name').val().trim();
        let address = $('#address').val().trim();
        let career = $('#career').val().trim();
        let sex = $("input[name='sex']:checked").val();
        // 处理选填字段
        address = address == ''?' ':address;
        career = career == ''?' ':career;

        if (name == ''){
            swal("请输入昵称", "昵称为必填项", "warning");
            return;
        }else if(sex === undefined){
            swal("请选择性别", "性别为必填项", "warning");
            return;
        }else {
            $.ajax({
                type: "POST",
                url: "admin/userUpdate",
                data: {name:name, address:address,career:career,sex:sex,flag:'user'},
                dataType: "json",
                success: function(data){
                    if (data['code']== 200){
                        swal("成功", "你已成功修改了基本信息", "success");
                    }else if (data['code']== 501){
                        swal("提示", "你没有修改任何信息", "info");
                    }else if (data['code']== 502){
                        swal("提示", "已经存在该用户名了哦，换一个名字吧", "info");
                    }else if (data['code']== 500){
                        swal("错误", "服务器发生了一个错误", "error");
                    }
                }
            });
        }
    }

</script>
</html>